<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ddd;
        }
        
        .content {
            width: 450px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        h2 {
            text-align: center;
        }
        
        .box {
            width: 220px;
            background-color: rgb(182, 182, 182);
            padding-top: 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            overflow: hidden;
        }
        
        img {
            display: block;
            width: 180px;
            margin: auto;
        }
        
        .textBox {
            padding: 0 15px 20px 15px;
            background-color: #fff;
        }
        
        .text {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .textP {
            padding-top: 10px;
            font-weight: bold;
            font-size: 18px;
        }
        
        button {
            background-color: transparent;
            border-radius: 5px;
            font-size: 12px;
        }
        
        .textColor {
            font-weight: bold;
            font-size: 18px;
        }
        
        .textColor1 {
            border: 1px solid orangered;
        }
        
        .textColor2 {
            display: inline-block;
            text-align: right;
            border: 1px solid darkgray;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <product-tag :product="product" @change_title="changeTitle"></product-tag>
    </div>
    <script src="../vue.js"></script>
    <template id="product">
        <div class="content">
            <div class="box"  v-for="(item,index) in product" :key="item.id" @click="change_title(index)">
                <img :src="item.img" alt="">
                <div class="textBox">
                    <p class="textP">{{item.name}}</p>
                    <div class="text">
                        <div>
                            <span class="textColor">{{item.price}}</span>
                            <button class="textColor1" v-if="item.btnStatus">{{item.btnName}}</button>
                        </div>
                        <button class="textColor2">看相似</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    product: [{
                        Id: 1,
                        name: "电子锁",
                        img: "./imgs/img1.png",
                        price: "￥599起",
                        btnName: "上新",
                        btnStatus: true
                    }, {
                        Id: 2,
                        name: "iQOO 9",
                        img: "./imgs/img2.png",
                        price: "￥2999起",
                        btnName: "满减",
                        btnStatus: true
                    }, {
                        Id: 3,
                        name: "多功能充电器",
                        img: "./imgs/img3.png",
                        price: "￥299",
                        btnName: "",
                        btnStatus: false
                    }, {
                        Id: 4,
                        name: "PS游戏机",
                        img: "./imgs/img4.png",
                        price: "￥1999起",
                        btnName: "上新",
                        btnStatus: true
                    }, {
                        Id: 5,
                        name: "扫地机器人",
                        img: "./imgs/img5.png",
                        price: "￥5999起",
                        btnName: "满减",
                        btnStatus: true
                    }, {
                        Id: 6,
                        name: "去球器",
                        img: "./imgs/img6.png",
                        price: "￥49",
                        btnName: "",
                        btnStatus: false
                    }],
                    title: "电子锁"
                }
            },
            methods: {
                changeTitle(val) {
                    this.title = val;
                }
            },
            components: {
                "product-tag": {
                    template: "#product",
                    data() {
                        return {}
                    },
                    props: ["product", "title"],
                    methods: {
                        change_title(i) {
                            let title = this.product[i].name;
                            this.$emit("change_title", title);
                        }
                    }
                }
            },
        })
    </script>
</body>

</html>